<template>
	<nt-container v-model="scrollHeight">
		<view class="h_content">
			<view class="h_addBtn">添加申请配件</view>
			<view class="check-tabs">
				<view class="check-tabs__item" :class="{ active: params.is_review === 0 }" @tap="tabsTap(0)">待审核</view>
				<view class="check-tabs__item" :class="{ active: params.is_review === 1 }" @tap="tabsTap(1)">已审核</view>
				<view class="check-tabs__item" :class="{ active: params.is_review === 2 }" @tap="tabsTap(2)">取消</view>
			</view>
			<nt-search-btn placeholder="请输入关键字" @tap="search"></nt-search-btn>
		</view>
			<u-list>
				<view class="h_list" v-if="list.length >0">
					<view class="h_box" v-for="item in list" :key="item.id">
						<view class="h_row">
							<view class="h_L">
								<text class="h_t1">师傅：</text>
								<text class="h_t2">city</text>
							</view>
							<view class="h_R">{{item.update_date}}</view>
						</view>
						<view class="h_row" v-for="it in item.parts_json" :key="it.id">
							<view class="h_L">
								<text class="h_t1">配件：</text>
								<text class="h_t2">{{it.parts_type}}->{{it.parts_name}}</text>
							</view>
							<view class="h_R">
								<text class="h_t1">数量：</text>
								<text class="h_t2">{{it.number}}</text>
							</view>
						</view>
						<view class="h_row">
							<view class="h_L">
								<text class="h_t1">状态：</text>
								<text class="h_t2">{{item.is_review==0?'未审核':(item.is_review==1?'已审核':'取消')}}</text>
							</view>
						</view>
						<view class="h_row">
							<view class="h_L">
								<text class="h_t1">备注：</text>
								<text class="h_t2">{{item.remarks}}</text>
							</view>
						</view>
						<view class="h_row">
							<view class="h_btn h_btn1">修改</view>
							<view class="h_btn h_btn2">取消</view>
						</view>
					</view>
				</view>
				<u-empty icon="https://cdn.uviewui.com/uview/empty/data.png" v-else></u-empty>
			</u-list>
	</nt-container>
</template>

<script>
import { getPartsApplyLogList } from "@/api"
	export default {
		data() {
			return {
				scrollHeight: 0,
				params:{
					is_review:0,
					keyword:'',
					page:1,
					limit:10,
				},
				list:[],
				load_more:true,
			}
		},
		computed: {
			listHeight(){
				let convention = this.scrollHeight;
				return convention
			},
		},
		onShow() {
			this.getList()
		},
		methods: {
			getList(){
				let that = this
				let params = that.params
				getPartsApplyLogList(params).then(res => {
					let data = res.data.data;
					if(that.params.page == 1) that.list = []
					that.list = that.list.concat(data);
					if(that.params.page >= data.last_page || that.list.length< 1){
						that.load_more = false;
					}
				})
			},
			tabsTap(e){
				this.params.is_review = e
				this.params.page = 1
				this.getList()
			}
		}
	}
</script>

<style lang="scss">
	view{box-sizing: border-box;}
	.h_content{
		padding: 20rpx;
		.h_addBtn{
			line-height: 90rpx;
			background: #1B5BC5;
			font-size: 24rpx;
			text-align: center;
			border-radius: 6rpx;
			color: #fff;
			margin-bottom: 20rpx;
		}
		.check-tabs{
			display:flex;
			align-items: center;
			justify-content: space-between;
			height: 90rpx;
			// margin: 20rpx;
			margin-bottom: 20rpx;
			background:#fff;
			border-radius: 6rpx;
			overflow: hidden;
			&__item{
				flex: 1;
				text-align: center;
				color:#666;
				position: relative;
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 30rpx;
				&.active{
					background: var(--theme-color);
					color:#fff;
				}
				&::before{
					content: '';
					display: block;
					position: absolute;
					top: 0;
					bottom:0;
					left: 0;
					width:1rpx;
					background:#f5f5f5
				}
			}
		}
		
	}
		.h_list{
			padding: 0 20rpx;
			.h_box{
				margin-bottom: 20rpx;
				background: #fff;
				padding: 20rpx;
				border-radius: 6rpx;
				box-shadow: 2px 2px 4px 3px #ddd;
				.h_row{
					margin-bottom: 10rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					.h_L{
						font-size: 30rpx;
						.h_t1{color: #999;}
					}
					.h_R{
						font-size: 30rpx;
						.h_t1{color: #999;}
						.h_t2{color: #f00;}
					}
					.h_btn{
						margin-top: 16rpx;
						width: 160rpx;
						border-radius: 6rpx;
						color: #fff;
						font-size: 30rpx;
						line-height: 60rpx;
						text-align: center;
					}
					.h_btn1{background: #007aff;}
					.h_btn2{background: #f00;}
				}
			}
		}
</style>
